<template>
  <div class="dashboard-container main_spac">
    <div
      :class="[{ mainin_box_nodata: main_loading }, 'mainin_ul']"
      @click="mainin_ex = false"
      v-loading="main_loading"
      element-loading-text="拼命加载中..."
    >
      <ul class="boxha">
        <template v-for="(item, index) in main_index">
          <!-- 今日简报 -->
          <li v-if="item == 1" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_h">
                <span class="main_title">今日简报</span>
                <div class="bigdata">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="数据大屏"
                    placement="top"
                  >
                    <img
                      src="@/assets/images/big_data.png"
                      style="width: 19px; height: 19px"
                      @click.stop="jumpbigdata(1)"
                    />
                  </el-tooltip>
                </div>
              </div>
              <div class="mainin_jb">
                <ul class="boxha">
                  <li>
                    <div class="mainin_jbm">
                      <h3>新增订单</h3>
                      <p>
                        <!-- <span>{{ list.order_increased }}</span> -->
                        <span>100</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>同比增长</h3>
                      <p>
                        <!-- <span>{{ list.order_increased_money }}</span> -->
                        <span>50%</span>
                      </p>
                    </div>
                  </li>
                  <!-- <li>
										<div class="mainin_jbm">
											<h3>药残预警</h3>
											<p>
												<span>1</span>
											</p>
										</div>
									</li> -->
                  <li>
                    <div class="mainin_jbm">
                      <h3>商户黑名单</h3>
                      <p>
                        <!-- <span>{{ list.order_rate }}%</span> -->
                        <span>5</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>用户下单率</h3>
                      <p>
                        <span>80%</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>配送订单</h3>
                      <p>
                        <span>35</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>供应商黑名单</h3>
                      <p>
                        <span>2</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>预警数量</h3>
                      <p>
                        <span>3</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>检测次数</h3>
                      <p>
                        <span>40</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3></h3>
                      <p>
                        <span>...</span>
                      </p>
                    </div>
                  </li>
                  <!-- <li>
										<div class="mainin_jbm">
											<h3>发货进度</h3>
											<p>
												<span
													>{{
														list.send_rate
															? parseFloat(list.send_rate).toFixed(2)
															: "0"
													}}%</span
												>
											</p>
										</div>
									</li> -->
                </ul>
              </div>
            </div>
          </li>
          <!--总销售  -->
          <li v-if="item == 2" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_h">
                <span class="main_title">待审核</span>
              </div>
              <div class="mainin_jx">
                <ul class="boxha">
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'order_list', params: { activeName: 1 } }"
                      >
                        <h3>药残预警</h3>
                        <p>
                          <span>10</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'order_list', params: { activeName: 2 } }"
                      >
                        <h3>待审核商户</h3>
                        <p>
                          <span>30</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'order_list',
                          params: { activeName: 3 },
                        }"
                      >
                        <h3>待审核供应链</h3>
                        <p>
                          <span>100</span>
                        </p>
                      </router-link>
                    </div>
                  </li>

                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'user_list', params: { status: 3 } }"
                      >
                        <h3>溯源异常</h3>
                        <p>
                          <span>8</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'purchasing_purchase',
                          params: { id: 1 },
                        }"
                      >
                        <h3>档口反馈</h3>
                        <p>
                          <span>1</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'warehouse_receipt',
                          params: { status: 1 },
                        }"
                      >
                        <h3>家长投诉</h3>
                        <p>
                          <span>0</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'financial_receivables',
                          params: { status: 1 },
                        }"
                      >
                        <h3>学生意见</h3>
                        <p>
                          <span>6</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'financial_cash', params: { status: 1 } }"
                      >
                        <h3>供应链意见</h3>
                        <p>
                          <span>10</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'financial_recharge',
                          params: { status: 1 },
                        }"
                      >
                        <h3>...</h3>
                        <p>
                          <span>{{ list.account }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <!-- 总销售 -->
          <!-- <li v-if="item == 4" :key="index">
						<div class="mainin_ulb">
							<div class="mainin_qxs">
								<div class="box">
									<div class="mainin_h">
										<span class="main_title">总销售</span>
									</div>
									<div class="mainin_qxs_a">
										<el-select v-model.trim="cycleid1" class="wid80" @change="cycleChange(1, cycleid1)">
											<el-option v-for="(item, index) in cycledata" :key="index" :label="item.name"
												:value="item.id"></el-option>
										</el-select>
									</div>
								</div>
								<div id="chartColumn1" style="width: 100%; height: 320px"></div>
							</div>
						</div>
					</li> -->
          <!-- 天气挂件 -->
          <li v-if="item == 3" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">天气</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="weather">
                    <weather></weather>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <!-- 单品 TOP5 -->
          <li v-if="item == 4" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_xlb">
                <div class="box">
                  <div class="mainin_h">
                    <span class="main_title">单品 TOP5</span>
                  </div>
                  <!-- <div class="mainin_qxs_a">
										<el-select v-model.trim="cycleid2" class="wid80" @change="cycleChange(2, cycleid2)">
											<el-option v-for="(item, index) in cycledata" :key="index" :label="item.name"
												:value="item.id"></el-option>
										</el-select>
									</div> -->
                </div>
                <div id="chartColumn3" style="width: 100%; height: 340px"></div>
              </div>
            </div>
          </li>
          <!-- 各大类占比 -->
          <li v-if="item == 5" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_xlb">
                <div class="box">
                  <div div class="mainin_h">
                    <span class="main_title">各大类占比</span>
                  </div>
                  <div class="mainin_qxs_a">
                    <el-select
                      v-model.trim="cycleid3"
                      class="wid80"
                      @change="cycleChange(3, cycleid3)"
                    >
                      <el-option
                        v-for="(item, index) in cycledata"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div id="chartColumn2" style="width: 100%; height: 340px"></div>
              </div>
            </div>
          </li>
          <!-- 意见反馈 -->
          <li v-if="item == 6" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">意见反馈</span>
                  </div>
                </div>

                <div class="mainin_qxk_p" v-if="list.feedback.length > 0">
                  <ul>
                    <li
                      class="boxdq"
                      v-for="(item, index) in list.feedback"
                      :key="index"
                      @click="feedback(index, item.content)"
                    >
                      <div class="mainin_qxk_pl box">
                        <span
                          v-if="item.unread == 0 ? true : false"
                          class="red_dot"
                        ></span>
                        <img :src="item.avatar ? item.avatar : puzzleImg" />
                        <div class="mainin_qxk_plw">
                          <p class="ellipsis">
                            {{ item.member.nickname }}
                          </p>
                          <span class="ellipsis">{{ item.content }}</span>
                        </div>
                      </div>
                      <div :class="['mainin_qxk_pr']">
                        <p>{{ parseTime(item.created_at, "{y}-{m}-{d}") }}</p>
                        <p><i class="el-icon-arrow-right"></i></p>
                      </div>
                    </li>
                  </ul>
                  <router-link class="advice_more" to="/morefeedback"
                    >更多 ></router-link
                  >
                </div>
                <div class="yjfk_no_data" v-if="list.feedback.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>
          <!-- 系统预警 -->
          <li v-if="item == 7" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">系统预警</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="warning_container">
                    <div
                      class="warning_item"
                      v-if="
                        warning.sms_notice == 1 &&
                        warning.sms_num < warning.sms_notice_number
                      "
                    >
                      <p>{{ warning.sms_num }}<span>条</span></p>
                      <p>短信余量提醒</p>
                    </div>
                    <div class="warning_item" v-if="warning.bill_count > 0">
                      <p>{{ warning.bill_count }}<span>条</span></p>
                      <p>待支付佣金账单</p>
                    </div>
                    <div
                      @click="handleJump('contract_period')"
                      class="warning_item"
                      v-if="warning.contract_period"
                    >
                      <p>{{ warning.contract_period }}<span>天</span></p>
                      <p>合约期剩余</p>
                    </div>
                    <div class="warning_item" v-if="warning.sms_set != 1">
                      <h3 @click="handleJump('sms')">短信账号未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.wx_set != 1">
                      <h3 @click="handleJump('wx')">微信公众号未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.union_set != 1">
                      <h3 @click="handleJump('union')">在线支付未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.baidu_set != 1">
                      <h3 @click="handleJump('baidu')">百度地图未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.site_set != 1">
                      <h3 @click="handleJump('site')">平台信息未配置完整</h3>
                    </div>
                  </div>
                </div>
                <div class="yjfk_no_data" v-if="warning_item_length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>
          <!-- 意见反馈 -->
          <li v-if="item == 8" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">意见反馈</span>
                  </div>
                </div>

                <div class="mainin_qxk_p" v-if="list.feedback.length > 0">
                  <ul>
                    <li
                      class="boxdq"
                      v-for="(item, index) in list.feedback"
                      :key="index"
                      @click="feedback(index, item.content)"
                    >
                      <div class="mainin_qxk_pl box">
                        <span
                          v-if="item.unread == 0 ? true : false"
                          class="red_dot"
                        ></span>
                        <img :src="item.avatar ? item.avatar : puzzleImg" />
                        <div class="mainin_qxk_plw">
                          <p class="ellipsis">
                            {{ item.member.nickname }}
                          </p>
                          <span class="ellipsis">{{ item.content }}</span>
                        </div>
                      </div>
                      <div :class="['mainin_qxk_pr']">
                        <p>{{ parseTime(item.created_at, "{y}-{m}-{d}") }}</p>
                        <p><i class="el-icon-arrow-right"></i></p>
                      </div>
                    </li>
                  </ul>
                  <router-link class="advice_more" to="/morefeedback"
                    >更多 ></router-link
                  >
                </div>
                <div class="yjfk_no_data" v-if="list.feedback.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>
          <!-- 行业资讯 -->
          <li v-if="item == 9" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">行业资讯</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="article.length > 0"
                >
                  <ul>
                    <li v-for="item in article" :key="item.id">
                      <div class="industry_article">
                        <div class="left">
                          <p @click="handleArticle(item.id, 1)">
                            {{ item.title }}
                          </p>
                          <p>
                            {{ item.intro }}
                          </p>
                        </div>
                        <div class="right">
                          {{ parseTime(item.add_time, "{y}-{m}-{d}") }}
                        </div>
                      </div>
                    </li>
                  </ul>
                  <a
                    href="https://www.caidj.net/news/4"
                    target="_blank"
                    class="advice_more"
                  >
                    更多资讯<i class="el-icon-d-arrow-right"></i
                  ></a>
                </div>
                <div class="yjfk_no_data" v-if="article.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>

          <!-- 更新记录 -->
          <li v-if="item == 10" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">更新记录</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="upgrade.length > 0"
                >
                  <ul>
                    <li v-for="(item, index) in upgrade" :key="index">
                      <div class="upgrade">
                        <div class="left">
                          [{{ parseTime(item.created_at) }}]
                        </div>
                        <div class="right">
                          <p @click="jumpUpdate(item)">
                            {{ item.title }}
                          </p>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <a
                    @click="jumpbigdata(2)"
                    target="_blank"
                    class="advice_more"
                  >
                    更多记录<i class="el-icon-d-arrow-right"></i
                  ></a>
                </div>
                <div class="yjfk_no_data" v-if="upgrade.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>

          <!-- 帮助中心 -->
          <li v-if="item == 11" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">帮助中心</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="help_center">
                    <div class="image_top">
                      <div class="left">
                        <img
                          @click="handleHelpCenter(1)"
                          src="@/assets/images/index_handlebook.png"
                          alt="使用手册"
                        />
                        <p>使用手册</p>
                      </div>
                      <div class="right">
                        <img
                          @click="handleHelpCenter(2)"
                          src="@/assets/images/index_question.png"
                          alt="常见问题"
                        />
                        <p>常见问题</p>
                      </div>
                    </div>
                    <div class="link_bottom">
                      <p>帮助热线：400-656-9798</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <!-- 招标信息 -->
          <li v-if="item == 12" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">招标信息</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="tender.length > 0"
                >
                  <ul>
                    <li v-for="item in tender" :key="item.id">
                      <div class="industry_article tender_industry_article">
                        <div class="left">
                          <p @click="handleArticle(item, 2)">
                            {{ item.title }}
                          </p>
                        </div>
                        <div class="right tender_right">
                          {{ parseTime(item.created_at, "{y}-{m}-{d}") }}
                        </div>
                      </div>
                    </li>
                  </ul>
                  <router-link class="advice_more" to="/moretender"
                    >更多信息 ></router-link
                  >
                </div>
                <div class="yjfk_no_data" v-if="tender.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <!-- 页面设置 -->
    <div
      :class="[{ on: mainin_xs }, ' mainin_xs']"
      @click.stop="mainin_ex = true"
      @mouseover="mainin_xs = true"
      @mouseleave="mainin_xs = false"
    >
      <i class="el-icon-arrow-up"></i>显示
    </div>
    <div :class="[{ on: mainin_ex }, ' mainin_ex']">
      <div class="mainin_exv">
        <h3>显示</h3>
        <div class="mainin_exa">
          <el-checkbox-group v-model="type">
            <ul>
              <draggable
                v-model="group"
                @chang="change"
                @start="start"
                @end="end"
                :move="move"
                :options="{
                  animation: 150,
                  sort: true,
                  forceFallback: true,
                  ghostClass: 'sortable-ghost',
                  fallbackOnBody: true,
                  handle: '.svg-icon',
                }"
              >
                <li class="boxdq" v-for="(item, index) in group" :key="index">
                  <el-checkbox :label="item.id" :disabled="item.disabled">{{
                    item.name
                  }}</el-checkbox>
                  <svg-icon icon-class="index_move" />
                </li>
              </draggable>
            </ul>
          </el-checkbox-group>
        </div>
      </div>
      <div class="mainin_exb">
        <el-button type="primary" @click="determine" v-repeatClick
          >确定</el-button
        >
        <el-button @click="recovery" v-repeatClick>恢复</el-button>
        <el-button @click="mainin_ex = false">取消</el-button>
      </div>
    </div>

    <!-- 图片显示查看器 -->
    <el-dialog
      title="意见反馈"
      :visible.sync="showViewer"
      width="600px"
      top="105px"
      style="min-height: 300px"
    >
      <div class="dialog_main">
        <div class="dialog_content">
          <p>
            {{ feedContent }}
          </p>
        </div>
        <div class="dialog_img">
          <el-image
            style="width: 150px; height: 150px"
            v-for="(item, index) in picList"
            :key="index"
            :src="item"
            :preview-src-list="picList"
          >
            >
          </el-image>
        </div>
      </div>
    </el-dialog>

    <!-- 没有数据图片 -->
    <img v-show="false" ref="img" src="@/assets/images/no_data.png" alt="" />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { mapGetters, mapMutations } from "vuex";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import draggable from "vuedraggable";
import { chart, unread, changeChart, setIndex } from "@/api/index/index";
import { sms_info_stock } from "@/api/global/globalSystem";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { puzzleImg, unpaid_order } from "@/api/currency";
import { parseTime } from "@/utils/index";
import { indexHeader } from "@/options/headerSet.js";
import Weather from "./components/weather.vue";

export default {
  name: "index",
  computed: {
    ...mapGetters([
      "name",
      "avatar",
      "indexSetting",
      "domestic",
      "contract_period",
      "is_expired",
      "companyInfo",
    ]),
  },
  components: {
    draggable,
    ElImageViewer,
    Weather,
  },
  data() {
    return {
      parseTime,
      indexHeader,
      indexHeader_recovery: JSON.parse(JSON.stringify(indexHeader)),
      main_loading: false,
      // 帮助文档
      helper_show: false,

      no_data_img: require("@/assets/images/no_data.png"),
      no_data_options: {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "50",
            bounding: "raw",
            style: {
              image: require("@/assets/images/no_data.png"),
              width: 92,
              opacity: 1,
            },
          },
        ],
      },
      // 图片显示查看器
      showViewer: false,
      feedContent: "", //反馈详情
      picList: [],
      // 筛选
      cycledata: [
        {
          id: 1,
          name: "一周",
        },
        {
          id: 2,
          name: "半个月",
        },
        {
          id: 3,
          name: "一个月",
        },
      ],
      cycleid1: 1,
      cycleid2: 1,
      cycleid3: 1,
      // 列表数据
      list: {
        feedback: [],
      },
      puzzleImg,

      // 更新记录
      notice: [
        {
          name: "测试",
          time: "2020-04-02",
        },
      ],
      // 行业资讯
      article: [],
      article_url: "",
      // 招标信息
      tender: [],
      // 更新记录
      upgrade: [],
      // 预警信息
      warning: {
        union_set: 0,
        sms_set: 0,
        wx_set: 0,
        baidu_set: 0,
        site_set: 0,
        sms_num: 0,
        sms_notice: 0,
        sms_notice_number: 80,
        bill_count: 0,
        contract_period: null,
        contract_period_url: null,
      },
      warning_item_length: 0,
      // 页面设置
      mainin_xs: false,
      mainin_ex: false,
      // 板块勾选
      type: [1, 2, 3, 4, 5, 6],

      // 板块内容
      group: indexHeader,
      // 显示板块

      main_index: [1, 2, 3, 4, 5, 6],
    };
  },
  watch: {
    domestic: {
      handler(val) {
        // let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！`;
        let message = "您的佣金账单还尚未支付，请及时支付";
        if (val.status == "notice") {
          this.$notify({
            title: "系统提示",
            type: "warning",
            position: "bottom-right",
            message: message,
            duration: 0,
          });
        }
      },
      deep: true,
      immediate: true,
    },
    is_expired: {
      handler(val) {
        let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！`;
        if (val) {
          this.$notify({
            title: "系统提示",
            type: "warning",
            position: "bottom-right",
            message: message,
            offset: 80,
            duration: 0,
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    ...mapMutations({
      SET_INDEX_SETTING: "user/SET_INDEX_SETTING",
    }),
    unpaid_order() {
      let data = Object.assign(
        apiUrl().name
      );
      unpaid_order(data).then((res) => {
        console.log(res);
      });
    },
    // 帮助文档
    handleHelp() {
      this.helper_show = !this.helper_show;
    },
    // 监听拖动
    change(event) {
      // console.log('change', event)
    },
    start(event) {
      // console.log('start', event)
    },
    end(event) {
      // console.log('end', event, this.group)
    },
    move(event, orgin) {
      // console.log('move', event, orgin)
    },
    // 页面设置
    setIndex(setting, sort) {
      let data = Object.assign(
        apiUrl().name,
        { setting: setting, sort: sort }
      );
      let company_id = this.indexSetting.company_id;
      let form = {
        company_id: company_id,
        setting: setting,
        sort: sort,
      };
      setIndex(data).then((res) => {
        if (res.errcode == 0) {
          this.SET_INDEX_SETTING(form);
        } else {
          this.$message.error("失败");
        }
      });
    },
    // 页面设置确定
    determine() {
      var data = [];
      this.group.map((e) => {
        this.type.map((m) => {
          if (e.id == m) {
            data.push(e.id);
          }
        });
      });
      this.main_index = data;
      let setting = data.join(",");
      let arr = [];
      this.group.map((e) => {
        arr.push(e.id);
      });
      let sort = arr.join(",");
      // this.setIndex(setting, sort);

      for (var i = 1; i < 4; i++) {
        if (document.getElementById("chartColumn" + i)) {
          document
            .getElementById("chartColumn" + i)
            .removeAttribute("_echarts_instance_");
          document.getElementById("chartColumn" + i).innerHTML = "";
        }
      }
      setTimeout(() => {
        this.chartColumn();
      });
      this.mainin_ex = false;
    },
    // 页面设置恢复
    recovery() {
      for (var i = 1; i < 4; i++) {
        if (document.getElementById("chartColumn" + i)) {
          document
            .getElementById("chartColumn" + i)
            .removeAttribute("_echarts_instance_");
          document.getElementById("chartColumn" + i).innerHTML = "";
        }
      }
      this.main_index = [1, 2, 3, 4, 5, 6];
      // this.main_index = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

      this.group = this.indexHeader_recovery;

      this.type = [1, 2, 3, 4, 5, 6];
      let arry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let setting = this.main_index.join(",");
      let sort = arry.join(",");
      this.setIndex(setting, sort);
      // setTimeout(() => {
      // this.chartColumn();
      // });
      this.$nextTick(() => {
        this.chartColumn();
      });
      this.mainin_ex = false;
    },
    // 只适用图表方法
    drawLine(dom, option) {
      console.log(option);
      if (document.getElementById(dom)) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);

        // 清空画布
        myChart.clear();

        // 绘制图表
        myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      } else {
        console.log("暂无");
      }
    },
    // 图表
    chartColumn(id) {
      let list = {
        "2023-08-11": 98,
        "2023-08-12": 0,
        "2023-08-13": 514,
        "2023-08-14": 222,
        "2023-08-15": 608,
        "2023-08-16": 0,
        "2023-08-17": 0,
      };
      let list3 = [
        {
          goods_spu_id: 155946,
          name: "鸡叉骨【箱】",
          order_money: "576.00",
        },
        {
          goods_spu_id: 155687,
          name: "白菜【斤】",
          order_money: "238.00",
        },
        {
          goods_spu_id: 174888,
          name: "鸡块【斤】",
          order_money: "160.00",
        },
        {
          goods_spu_id: 270443,
          name: "橙子约500g【份】",
          order_money: "125.00",
        },
        {
          goods_spu_id: 175697,
          name: "红鸡蛋【件】",
          order_money: "110.00",
        },
      ];
      let list2 = [
        {
          name: "蔬菜类",
          value: "50.73",
        },
        {
          name: "水果类",
          value: "25.55",
        },
        {
          name: "家禽",
          value: "10.70",
        },
        {
          name: "粮油干货类",
          value: "14.00",
        },
      ];
      // 折线图
      let dom1 = "chartColumn1";
      let option1 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 20,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data:
            // this.list.sales.length != 0
            // 	? Object.entries(this.list.sales).map((e) => e[0])
            // 	: [],
            Object.entries(list).map((e) => e[0]),
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "当日销售",
            data:
              // this.list.sales.length != 0
              // 	? Object.entries(this.list.sales).map((e) => e[1])
              // 	: [],
              Object.entries(list).map((e) => e[1]),
            symbol: "circle",
            symbolSize: 10,
            smooth: true, //这句就是让曲线变平滑的
            type: "line",
            lineStyle: {
              normal: {
                color: "#03A98E",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: "#BAFFF4",
                color: "#03A98E",
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(3,169,142,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(3,169,142,0.25)",
                    },
                  ]),
                },
              },
            },
          },
        ],
      };

      // 柱状图
      let dom2 = "chartColumn3";
      let option2 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 40,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#eaeaea",
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data: list3.length != 0 ? list3.map((e) => e.name) : [],
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "下单总额",
            data: list3.length != 0 ? list3.map((e) => e.order_money) : [],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#6DF0DA",
                    },
                    {
                      offset: 1,
                      color: "#05AA8F",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      // this.drawLine(dom1, option1);
      this.drawLine(dom2, option2);

      // 饼图
      let dom3 = "chartColumn2";

      var rich = {
        name: {
          color: "#333",
          fontSize: 14,
          padding: [0, 5],
          fontWeight: "400",
          align: "right",
        },
        percent: {
          color: "#fff",
          align: "right",
          fontSize: 14,
          fontWeight: "500",
          padding: [0, 5],
        },
        hr: {
          borderColor: "#333",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option3 = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          position: ["50%", "50%"],
          formatter: "{a} <br/>{b}: {c}%",
        },
        grid: {
          top: 0,
        },
        series: [
          {
            name: "下单金额占比",
            type: "pie",
            radius: [0, "70%"],
            color: "#49dbc4",
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#333",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return "{name|" + params.name + "}";
                },
                rich: rich,
              },
            },
            data: list2,
          },
          {
            name: "下单金额占比",
            type: "pie",
            color: "#49dbc4",
            radius: [0, "70%"],
            label: {
              normal: {
                position: "inner",
                formatter: (params) => {
                  return "{percent|" + params.percent.toFixed(0) + "%}";
                },
                rich: rich,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 5,
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: list2,
          },
        ],
      };
      this.drawLine(dom3, option3);
      return false;
      let newarr = [];
      for (const key in this.list.sales) {
        if (this.list.sales[key] != 0) {
          newarr.push(this.list.sales[key]);
        }
      }
      if (newarr.length == 0) {
        option1 = this.no_data_options;
      }
      if (this.list.single.length == 0) {
        option2 = this.no_data_options;
      }
      if (this.list.category.length == 0) {
        option3 = this.no_data_options;
      }
      if (id) {
        if (id == 1) {
          this.drawLine(dom1, option1);
        }
        if (id == 2) {
          this.drawLine(dom2, option2);
        }
        if (id == 3) {
          this.drawLine(dom3, option3);
        }
      } else {
        this.drawLine(dom1, option1);
        this.drawLine(dom2, option2);
        this.drawLine(dom3, option3);
      }
    },

    // 选择日期
    cycleChange(type, id) {
      let data = Object.assign(
        apiUrl().name,
        { type: type, id: id }
      );
      changeChart(data).then((res) => {
        if (res.errcode == 0) {
          if (type == 1) {
            this.list.sales = res.data;
          }
          if (type == 2) {
            this.list.single = res.data;
          }
          if (type == 3) {
            this.list.category = res.data;
          }
          // 图表
          this.chartColumn(type);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 意见反馈查看
    feedback(index, content) {
      this.picList = [];
      this.picList = this.list.feedback[index].img.map((e) => e.img);

      let id = this.list.feedback[index].id;
      this.feedContent = content;
      this.$nextTick(() => {
        this.showViewer = true;
        this.unread(id).then(() => {
          this.list.feedback[index].unread = 1;
        });
      });
    },
    // 查看更改状态
    unread(id) {
      let data = Object.assign(
        apiUrl().name,
        { id: id }
      );
      return new Promise((resolv, reject) => {
        unread(data).then((res) => {
          if (res.errcode == 0) {
            resolv();
          }
        });
      });
    },
    chart() {
      this.main_loading = true;
      let data = Object.assign(
        apiUrl().name
      );
      chart(data).then((res) => {
        this.main_loading = false;
        if (res.errcode == 0) {
          // console.log();
          let list = res.data.single;
					let list2 = res.data.category
          this.getDanpinTop(list);
					this.getZhanBi(list2)
          return;
          res.data.feedback.map((e) => {
            if (e.img) {
              e.img.map((p) => {
                p.img = this.avatar.domain + p.img;
              });
            }
            e.avatar = "";
            if (e.member.avatar) {
              e.avatar = this.avatar.domain + "/" + e.member.avatar;
            } else {
              e.avatar = e.member.wx_avatar;
            }
          });
          this.article = res.data.article;
          this.article_url = res.data.article_url;
          this.tender = res.data.tender;
          this.upgrade = res.data.upgrade;

          this.warning.union_set = res.data.union_set;
          this.warning.sms_set = res.data.sms_set;
          this.warning.wx_set = res.data.wx_set;
          this.warning.baidu_set = res.data.baidu_set;
          this.warning.site_set = res.data.site_set;
          this.warning.sms_notice = res.data.sms_notice;
          this.warning.sms_notice_number = res.data.sms_notice_number;
          this.warning.bill_count = res.data.bill_count;
          this.warning.contract_period = res.data.contract_period;
          this.warning.contract_period_url = res.data.contract_period_url;
          this.list = res.data;
          // 图表
          this.chartColumn();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    // 单品Top5函数重写
    getDanpinTop(list) {
      let dom2 = "chartColumn3";
      let option2 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 40,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#eaeaea",
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data: list.length != 0 ? list.map((e) => e.name) : [],
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "下单总额",
            data: list.length != 0 ? list.map((e) => e.order_money) : [],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#6DF0DA",
                    },
                    {
                      offset: 1,
                      color: "#05AA8F",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      // this.drawLine(dom1, option1);
      this.drawLine(dom2, option2);
    },
    getZhanBi(list2) {
      let dom3 = "chartColumn2";

      var rich = {
        name: {
          color: "#333",
          fontSize: 14,
          padding: [0, 5],
          fontWeight: "400",
          align: "right",
        },
        percent: {
          color: "#fff",
          align: "right",
          fontSize: 14,
          fontWeight: "500",
          padding: [0, 5],
        },
        hr: {
          borderColor: "#333",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option3 = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          position: ["50%", "50%"],
          formatter: "{a} <br/>{b}: {c}%",
        },
        grid: {
          top: 0,
        },
        series: [
          {
            name: "下单金额占比",
            type: "pie",
            radius: [0, "70%"],
            color: "#49dbc4",
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#333",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return "{name|" + params.name + "}";
                },
                rich: rich,
              },
            },
            data: list2,
          },
          {
            name: "下单金额占比",
            type: "pie",
            color: "#49dbc4",
            radius: [0, "70%"],
            label: {
              normal: {
                position: "inner",
                formatter: (params) => {
                  return "{percent|" + params.percent.toFixed(0) + "%}";
                },
                rich: rich,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 5,
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: list2,
          },
        ],
      };
      this.drawLine(dom3, option3);
    },
    // 短息余量
    sms_info_stock() {
      let data = Object.assign(
        apiUrl().name
      );
      sms_info_stock(data).then((res) => {
        if (res.errcode == 0) {
          this.warning.sms_num = res.data.balance;
        }
      });
    },
    closeViewer() {
      this.showViewer = false;
    },
    // 行业资讯跳转 && 招标信息
    handleArticle(params, type) {
      switch (type) {
        case 1:
          let url = this.article_url + params;
          window.open(url);
          break;
        case 2:
          url = params.url;
          window.open(url);
          break;

        default:
          break;
      }
    },
    // 帮助中心跳转
    handleHelpCenter(type) {
      let url = "";
      let modeList = {
        1: "批发",
        2: "城配",
        3: "软件",
      };
      let form = {
        type: this.companyInfo.model,
        product_type: 2,
        document_type: 1,
        name: modeList[this.companyInfo.model],
      };
      let str = "";

      switch (type) {
        case 1:
          form.document_type = 1;
          for (const key in form) {
            str += `${key}=${form[key]}&`;
          }
          // url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
          url = "http://help.caidj.net.cn/#/index/detail/?${str}";
          break;
        case 2:
          form.document_type = 2;
          for (const key in form) {
            str += `${key}=${form[key]}&`;
          }
          // url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
          url = "http://help.caidj.net.cn/#/index/detail/?${str}";
          break;
      }
      window.open(url);
    },
    // 预警跳转
    handleJump(type) {
      let obj = {
        sms: "2",
        wx: "3",
        union: "0",
        baidu: "1",
      };
      let url1 = "global_system_config";
      let url2 = "global_Third";
      if (type == "site") {
        this.$router.push({
          name: url1,
        });
      } else if (type == "contract_period") {
        let url = this.warning.contract_period_url;
        url ? window.open(url) : "";
      } else {
        this.$router.push({
          name: url2,
          params: {
            type: obj[type],
          },
        });
      }
    },
    // 数据大屏 & 帮助文档
    jumpbigdata(type) {
      let modeList = {
        1: "批发",
        2: "城配",
        3: "软件",
      };
      switch (type) {
        case 1:
          this.$router.push({
            path: "/bigdata",
          });
          break;

        case 2:
          //  href="http://help.caidj.net.cn/"
          let form = {
            type: this.companyInfo.model,
            product_type: 2,
            document_type: 3,
            name: modeList[this.companyInfo.model],
          };
          let str = "";
          for (const key in form) {
            str += `${key}=${form[key]}&`;
          }
          str = str.substring(0, str.lastIndexOf("&"));
          let url = `http://help.caidj.net.cn/#/index/detail/?${str}`;
          // let url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
          window.open(url);
          break;
      }
    },
    // 更新记录跳转
    jumpUpdate(item) {
      let modeList = {
        1: "批发",
        2: "城配",
        3: "软件",
      };
      let form = {
        type: item.type,
        product_type: item.product_type,
        document_type: item.document_type,
        id: item.id,
        name: modeList[this.companyInfo.model],
      };
      let str = "";
      for (const key in form) {
        str += `${key}=${form[key]}&`;
      }
      str = str.substring(0, str.lastIndexOf("&"));
      let url = `http://help.caidj.net.cn/#/index/detail?${str}`;
      window.open(url);
    },
  },
  mounted() {
    // this.chartColumn();
    // 图表
    this.chart();
    let indexSetting = this.indexSetting.setting;

    if (indexSetting) {
      let arr = indexSetting.split(",");
      this.main_index = arr;
      this.type = arr.map(Number);
    }
    let sort = this.indexSetting.sort.split(",");
    sort = sort.map(Number);

    this.group.sort((pre, next) => {
      const p = sort.indexOf(pre.id);
      const n = sort.indexOf(next.id);
      return p - n;
    });

    // 短息
    this.sms_info_stock();
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    let ids = {
      first_id: 0,
      second_id: 0,
      title: "帮助文档",
    };
    ids = JSON.stringify(ids);
    localStorage.setItem("cc", ids);
  },
  created() {},
  updated() {
    let warning_container = document.querySelector(".warning_container");

    if (warning_container) {
      let warning_item = warning_container.querySelectorAll(".warning_item");
      this.warning_item_length = warning_item.length;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.dashboard-container {
  .mainin_ul {
    margin-top: 15px;

    & > ul {
      margin-left: -5px;
      margin-right: -5px;

      & > li {
        width: 33%;
        height: 420px;
        overflow: hidden;
        margin-bottom: 15px;

        .mainin_ulb {
          margin-left: 5px;
          margin-right: 5px;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 20px;
          background: $white;
          height: 100%;
        }

        .mainin_h {
          font-size: 14px;
          color: #181818;
          font-weight: bold;

          .main_title {
            &::before {
              content: "";
              display: inline-block;
              width: 5px;
              height: 15px;
              background-color: #19b098;
              vertical-align: top;
              margin-right: 8px;
            }
          }

          .bigdata {
            float: right;
            padding-right: 8px;
          }
        }

        .mainin_qxs_a {
          margin-left: 10px;
          margin-top: -8px;

          /deep/.el-input__inner {
            border: 0;
            font-size: $font_12;
            padding-right: 10px;
          }

          /deep/.el-select__caret {
            color: $colour_18;
            line-height: 31px;
          }
        }

        .mainin_hy {
          .mainin_hya {
            font-size: $font_14;
            color: $menuActiveText;
          }

          ul {
            margin-top: 20px;

            li {
              height: 24px;
              line-height: 24px;
              margin-top: 10px;

              a {
                font-size: $font_14;
                color: $colour_18;

                span {
                  margin-right: 10px;
                }

                &:hover {
                  color: $menuActiveText;
                }
              }
            }
          }
        }

        .mainin_jb {
          ul {
            margin-left: -10px;
            margin-top: 10px;

            li {
              width: 33.33%;
              margin-top: 7px;

              .mainin_jbm {
                padding-top: 15px;
                margin-left: 10px;
                margin-right: 10px;
                padding-left: 30px;
                padding-right: 15px;
                padding-bottom: 2px;
                min-height: 103px;
                background-color: #f7f9fa;
                background-image: url("./../../assets/images/t1.png");
                background-position: 9px 12px;
                background-repeat: no-repeat;
                background-size: 16px;

                &:hover {
                  box-shadow: 0px 2px 9px 1px rgba(10, 2, 4, 0.29);
                }

                h3 {
                  font-size: 13px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #4c4c4c;
                }

                p {
                  font-size: $font_16;
                  color: $menuActiveText;
                  min-height: 40px;
                  align-items: center;
                  display: flex;
                  margin-top: 10px;

                  span {
                    display: block;
                    width: 100%;
                    word-wrap: break-word;
                    font-size: 18px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #19b098;
                  }
                }
              }

              &:nth-child(1) .mainin_jbm,
              &:nth-child(4) .mainin_jbm {
                background-image: url("./../../assets/images/t1.png");
              }

              &:nth-child(7) .mainin_jbm {
                background-image: url("./../../assets/images/t3.png");
              }

              &:nth-child(6) .mainin_jbm {
                background-image: none;
              }

              &:nth-child(2) .mainin_jbm {
                background-image: url("./../../assets/images/t1.png");
              }

              &:nth-child(5) .mainin_jbm,
              &:nth-child(8) .mainin_jbm,
              &:nth-child(6) .mainin_jbm,
              &:nth-child(9) .mainin_jbm {
                background-image: url("./../../assets/images/t3.png");
              }

              &:nth-child(3) .mainin_jbm {
                background-image: url("./../../assets/images/t3.png");
              }
            }
          }
        }

        .mainin_jx {
          ul {
            // margin-top: 18px;
            margin-left: 10px;
            margin-right: 10px;

            li {
              width: 33.33%;

              .mainin_jxb {
                // padding-top: 10px;
                margin-top: 20px;
                // padding-bottom: 10px;
                // padding-left: 15px;
                margin-right: 20px;

                a {
                  display: block;
                  background: url("./../../assets/images/1.png") bottom 5px
                    right 5px no-repeat;
                  background-color: #f7f9fa;
                  padding: 10px 10px;
                  box-sizing: border-box;
                  background-size: 40px;

                  &:hover {
                    box-shadow: 0px 0px 9px 1px rgba(10, 2, 5, 0.42);
                  }
                }

                h3 {
                  font-size: $font_14;
                  color: $colour_18;
                  display: inline-block;
                  vertical-align: middle;

                  em {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 2px;
                    background: #daaaec;
                    margin-right: 10px;
                  }
                }

                p {
                  font-size: $font_16;
                  color: $colour_18;
                  min-height: 40px;
                  align-items: center;
                  display: flex;
                  margin-top: 15px;

                  span {
                    display: block;
                    width: 100%;
                    word-wrap: break-word;

                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #2b2b2b;
                  }
                }
              }

              &:nth-child(2) {
                a {
                  background-image: url("./../../assets/images/2.png");
                }
              }

              &:nth-child(3) {
                a {
                  background-image: url("./../../assets/images/3.png");
                }
              }

              &:nth-child(4) {
                a {
                  background-image: url("./../../assets/images/4.png");
                }
              }

              &:nth-child(5) {
                a {
                  background-image: url("./../../assets/images/5.png");
                }
              }

              &:nth-child(6) {
                a {
                  background-image: url("./../../assets/images/6.png");
                }
              }

              &:nth-child(7) {
                a {
                  background-image: url("./../../assets/images/7.png");
                }
              }

              &:nth-child(8) {
                a {
                  background-image: url("./../../assets/images/8.png");
                }
              }

              &:nth-child(9) {
                a {
                  background-image: url("./../../assets/images/9.png");
                }
              }
            }
          }
        }

        .mainin_qxs {
          #chartColumn1 {
            margin-top: 10px;
          }
        }

        .mainin_qxk {
          background: $white;
          padding-bottom: 10px;

          .mainin_qxk_p {
            margin-top: 20px;

            ul {
              height: 332px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;

              li {
                border-bottom: 1px solid $colour_f4;
                padding-top: 10px;
                padding-bottom: 10px;

                .mainin_qxk_pl {
                  width: calc(100% - 80px);
                  position: relative;

                  .red_dot {
                    position: absolute;
                    top: 50%;
                    left: -10px;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background-color: red;
                  }

                  img {
                    width: 48px;
                    height: 48px;
                    object-fit: cover;
                    margin-right: 10px;
                    border-radius: 1000px;
                  }

                  .mainin_qxk_plw {
                    width: 80%;

                    p {
                      font-size: 14px;
                      color: #333;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }

                    span {
                      font-size: 14px;
                      color: #555;
                      display: block;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }
                  }
                }

                .mainin_qxk_pr {
                  text-align: right;
                  font-size: 14px;
                  color: #4f4f4f;

                  &.read {
                    color: #00c388;
                  }

                  p {
                    &:last-child {
                      padding-top: 8px;

                      .el-icon-arrow-right:before {
                        font-weight: 700;
                      }
                    }
                  }
                }

                &:hover {
                  cursor: pointer;
                }

                &:last-child {
                  border: 0;
                }
              }
            }
          }

          .yjfk_no_data {
            width: 100%;
            text-align: center;
            padding-top: 60px;
          }
        }

        .mainin_xlb {
          height: 285px;
          padding-bottom: 10px;

          #chartColumn1,
          #chartColumn2,
          #chartColumn3 {
            margin-top: 20px;
          }

          .mainin_xlb_p {
            border: 1px solid $colour_f4;
            margin-top: 20px;

            ul {
              height: 340px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;

              li {
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 14px;
                color: #333;

                .mainin_xlb_pw {
                  width: calc(100% - 80px);

                  p {
                    width: calc(100% - 85px);
                    margin-left: 5px;
                  }
                }

                em {
                  text-align: center;
                  color: #555;
                }
              }
            }
          }
        }
      }
    }
  }

  .mainin_xs {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 9;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 1000px;
    background: $menuActiveText;
    font-size: $font_12;
    color: $white;
    transition: all 0.5s;
    transform: translate3d(50%, 0, 0);
    box-shadow: 0px 3px 10px 0px #413f3f3d;

    i {
      font-size: 22px;
      transform: rotate(-90deg);
      vertical-align: -4px;
    }

    &:hover {
      cursor: pointer;
    }

    &.on {
      transform: translate3d(0, 0, 0);
    }
  }

  .mainin_ex {
    position: fixed;
    width: 230px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);

    &.on {
      transform: translate3d(0, 0, 0);
    }

    .sortable-ghost {
      background: $white;
      box-shadow: 0px 2px 8px 0px #413f3f1a;
    }

    // 显示影子元素
    .sortable-chosen {
      &:hover {
        cursor: move;
      }
    }

    .mainin_exv {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;

      h3 {
        font-size: $font_16;
        color: $colour_18;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid $colour_e6;
        padding-left: 20px;
      }

      .mainin_exa {
        margin-top: 15px;

        ul {
          li {
            align-items: center;
            padding-left: 20px;
            padding-right: 10px;

            /deep/.el-checkbox {
              margin-top: 10px;
              margin-bottom: 10px;
            }

            /deep/.el-checkbox__label {
              padding-left: 15px;
            }

            .svg-icon {
              /* 通过设置 font-size 来改变图标大小 */
              font-size: $font_18;
              /* 图标和文字相邻时，垂直对齐 */
              vertical-align: -0.15em;
              /* 通过设置 color 来改变 SVG 的颜色/fill */
              fill: $colour_3;
              /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
              normalize.css 中也包含这行 */
              overflow: hidden;

              &:hover {
                cursor: move;
              }
            }
          }
        }
      }
    }

    .mainin_exb {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 55px;
      text-align: center;

      /deep/.el-button--default {
        margin-top: 12px;
        border-color: $subActive;
        color: $menuText;

        &:hover {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }

  // 为加载完数据时
  .mainin_box_nodata {
    height: calc(100vh - 60px);
    overflow: hidden;
  }
}

// 意见反馈更多
.advice_more {
  font-size: 14px;
  color: #00c388;
  text-align: right;
  float: right;
  padding-top: 8px;
  padding-right: 5px;
}

// 图片查看器
/deep/.el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
    padding: 10px 20px 10px;
    display: flex;
    align-items: center;
  }

  .el-dialog__title {
    font-size: 16px;
    vertical-align: bottom;

    &::before {
      content: " ";
      width: 6px;
      height: 15px;
      margin-right: 15px;
      background-color: #00c388;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .el-dialog__headerbtn {
    top: 15px;
  }

  .el-dialog__body {
    padding: 15px 20px 20px;
  }
}

.feedback_dialog {
  display: flex;
  flex-direction: column;

  .text {
    margin: 10px;
  }
}

.dialog_main {
  .dialog_content {
    p {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #646464;
      line-height: 23px;
      text-indent: 2rem;
    }
  }

  .dialog_img {
    margin-top: 15px;

    /deep/.el-image {
      margin: 0 15px;
    }
  }

  .dialog_footer {
    float: right;
  }
}

/* 帮助文档 */
.tips_box {
  position: fixed;
  bottom: 10px;
  right: 10px;

  .helper_icon {
    float: right;

    img {
      width: 81px;
      height: 81px;
    }
  }

  .help_panel {
    width: 404px;
    height: 632px;
    background-color: #ffffff;
    position: relative;
    bottom: 0;
    right: 81px;
    box-shadow: 2;
    box-shadow: 0px 0px 7px 1px rgba(10, 2, 5, 0.17);

    .top {
      height: 40px;
      line-height: 40px;
      padding: 0 13px;
      text-align: center;
      background-color: #19b098;

      h3 {
        font-size: 14px;
        color: #ffffff;
        display: inline;
      }

      .close {
        float: right;
        line-height: 40px;
        color: #ffffff;
      }
    }
  }
}

.help_panel-enter-active {
  transition: opacity 0.3s;
}

.help_panel-enter {
  opacity: 0;
}

.help_panel-leave-active {
  transition: opacity 0.3s;
}

.help_panel-leave-to {
  opacity: 0;
}

/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none !important;
}

/* 行业资讯 */
.industry_article_box {
  li {
    padding: 7px 0;
  }
}

.industry_article {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  &.tender_industry_article {
    align-items: center;
  }

  .left {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;

    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;
      cursor: pointer;

      &:first-child {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #070707;
      }

      &:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #777373;
      }
    }
  }

  .right {
    width: 100px;
    text-align: right;
    height: 12px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #9c9c9c;
    padding-left: 10px;
  }

  .tender_right {
    height: 100%;
    text-align: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}

/* 更新记录 */
.upgrade {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .left {
    width: 175px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #9c9c9c;
  }

  .right {
    flex: 1;
    // white-space: nowrap;
    overflow: hidden;

    p {
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;

      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #070707;
    }
  }
}

/* 帮助中心 */
.help_center {
  height: 340px;
  position: relative;

  .image_top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 60px;

    .left,
    .right {
      padding: 0 50px;
      text-align: center;
    }

    img {
      width: 100px;
    }

    p {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #767676;
      line-height: 23px;
      padding-top: 20px;
    }
  }

  .link_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #19b098;
    }
  }
}

/* 天气 */
.weather {
  width: 100%;
  height: 340px;
}

/* 预警 */
.warning_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .warning_item {
    width: 146px;
    height: 82px;
    background: url("./../../assets/images/warning_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 18px 17px;
    margin-right: 20px;
    margin-bottom: 20px;

    p {
      &:first-child {
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #363636;

        span {
          font-size: 16px;
        }
      }

      &:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #bbbbbb;
        margin-top: 8px;
      }
    }

    h3 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #363636;
      line-height: 1.5;
      cursor: pointer;
    }
  }
}
</style>